import QtQuick 2.0

Item {
    id: root;

    Rectangle {
        anchors.fill: parent;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#f6f6f6" }
            GradientStop { position: 1.0; color: "#d7d7d7" }
        }
    }

    ListModel {
        id: spaceMen;

        ListElement { name: "Abdul Ahad Mohmand"; nation: "Afganistan"; }
        ListElement { name: "Marcos Pontes"; nation: "Brazil"; }
        ListElement { name: "Alexandar Panayotov Alexandrov"; nation: "Bulgaria"; }
        ListElement { name: "Georgi Ivanov"; nation: "Bulgaria"; }
        ListElement { name: "Roberta Bondar"; nation: "Canada"; }
        ListElement { name: "Marc Garneau"; nation: "Canada"; }
        ListElement { name: "Chris Hadfield"; nation: "Canada"; }
        ListElement { name: "Guy Laliberte"; nation: "Canada"; }
        ListElement { name: "Steven MacLean"; nation: "Canada"; }
        ListElement { name: "Julie Payette"; nation: "Canada"; }
        ListElement { name: "Robert Thirsk"; nation: "Canada"; }
        ListElement { name: "Bjarni Tryggvason"; nation: "Canada"; }
        ListElement { name: "Dafydd Williams"; nation: "Canada"; }
    }

    ListView {
        id: listView;

        width: 200;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.bottom: parent.bottom;

        clip: true;

        model: spaceMen;

        delegate: spaceMenDelegate;
        section.property: "nation";
        section.delegate: sectionDelegate;
    }

    Component {
        id: spaceMenDelegate;

        Item {
            width: ListView.view.width;
            height: 30;

            Text {
                clip: true;
                anchors.centerIn: parent;
                color: "black";
                font.pointSize: 12;
                text: name;
            }
        }
    }

    Component {
        id: sectionDelegate;

        Rectangle {
            width: ListView.view.width;
            height: 30;

            color: "#157efb";
            border.width: 2;
            border.color: "blue";
            Text {
                anchors.centerIn: parent;
                color: "#e0e0e0";
                text: section;
                font.pointSize: 12;
            }
        }
    }


}
